import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Card, Switch, Button, Modal, message, Popconfirm } from 'antd';
import AutoTable from '@/components/AutoTable';
import InitForm from '@/components/InitForm';
import { connect } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { company } from '@/services/business';
import moment from 'moment';
import CompanyName from '@/components/CompanyName';

// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input

function Domessage(props) {
  let defaultFields = {
    id: {
      value: null,
      type: 'select',
      title: '代账公司',
      name: ['id'],
      required: true,
      options: {
        database: company,
        params: {
          is_all: 1,
          type: -1,
          status: 'completed',
        },
      },
      col: { span: 24 },
    },
    message: {
      value: null,
      type: 'textarea',
      title: '消息',
      name: ['message'],
      required: false,
      col: { span: 24 },
    },
  };
  const [vs, cvs] = useState(false), //表单显/隐
    [fields, cf] = useState(defaultFields),
    [iftype, ciftype] = useState({});

  let actionRef = useRef(),
    ChildRef = null;
  function reload() {
    actionRef?.current?.reload();
    ChildRef?.onRefresh();
  }
  const columns = [
    {
      title: '客户公司',
      dataIndex: 'company_name',
      key: 'company_name',
      valueType: 'select',
      formItemProps: {
        name: 'company_id',
      },
      options: {
        database: company,
        params: {
          is_all: 1,
          type: -1,
          account_user_id: props.user.currentUser.id,
          status: 'completed',
          service_type: 'account',
        },
      },
      render: (_, row) => (
        <CompanyName
          row={{ ...row, name: row?.company_name ?? row.name, id: row?.company_id ?? row.id }}
          reload={reload}
        />
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (text, row) => {
        return <span>{moment(row.created_at).format('YYYY-MM-DD HH:mm')}</span>;
      },
    },
    {
      title: '发送的消息',
      dataIndex: 'message',
      key: 'message',
      search: false,
    },
  ];

  let extrarender = [
    <div
      className="action"
      title="新增"
      onClick={() => {
        cvs(true);
        cf((fields) => {
          for (let i in fields) {
            fields[i].value = null;
          }
          return { ...fields };
        });
        ciftype({
          val: 'add',
          title: '添加消息',
        });
      }}
    >
      <PlusOutlined />
    </div>,
  ];

  let saveData = (values) => {
    let { dispatch } = props;
    if (iftype.val == 'add') {
      dispatch({
        type: 'customer/sendtemplatemessage',
        payload: values,
      }).then((res) => {
        if (res.code == 0) {
          message.success('操作成功');
          reload();
          cvs(false);
        }
      });
    }
  };

  return (
    <div className="pgcontainer">
      <AutoTable
        pagetitle={props.route.name} //页面标题
        pageextra={extrarender} //页面操作 新增or批量删除
        columns={columns}
        actionRef={actionRef}
        onRef={(node) => (ChildRef = node)}
        path="/wbn-api/company/get_template_message"
        //withCard={false}
        //cardtitle = "name" //卡片标题
        //cardavatar = "img_url" //卡片头像
      ></AutoTable>
      <Modal
        maskClosable={false}
        title={iftype.title}
        open={vs}
        onCancel={() => cvs(false)}
        footer={false}
        width={1400}
        destroyOnClose={true}
      >
        <InitForm
          fields={fields}
          submitData={(values) => {
            saveData(values);
          }}
          onChange={(changedValues, allValues) => {
            //联动操作
          }}
          submitting={props.loading.effects['customer/sendtemplatemessage'] || !vs}
        ></InitForm>
      </Modal>
    </div>
  );
}

export default connect(({ customer, loading, user }) => ({
  customer,
  user,
  loading,
}))(Domessage);
